<script lang="ts" setup>
import { onMounted } from 'vue';
import cardTitle from './card-title.vue';
import mapTitle from './map-title.vue';
import mapFooter from './map-footer.vue';
import ChartWrapper from './chart-wrapper.vue';

const props = defineProps({
  pageInfo: {
    type: Object,
    default: () => ({
      cardList: {
        leftTop: [],
        rightTop: [],
        bottomList: []
      },
      pageName: '',
      content: {
        stationNum: 0,
        deviceNum: 0,
        pointNum: 0,
        yearEmissionReduction: '',
      },
      coreMain: '',
      coreSubStatData: []
    })
  }
})
onMounted(() => {
  console.log(props.pageInfo);
})

// 图表类型
const EnumChartType: any = {
  1: "LargeCombine",
  2: "LargeCombine",
  3: "LargeCombine",
  5: "LargeCombine",
  15: "LargeTable",
  16: "LargeTable",
};

</script>

<template>
  <div class="bi-template-view">
    <!-- 第一行 -->
    <a-row class ="template-total-view">
      <a-col :span="7">
        <div class="title-view">
          <cardTitle :cssType="1">
            <template #icon>
              <img src="../../../../assets/bi/icon-horn.png">
            </template>
            <span>站点数量 <text class="color-orange">{{ pageInfo.content.stationNum }}</text></span>
          </cardTitle>
          <cardTitle :cssType="1">
            <template #icon>
              <img src="../../../../assets/bi/icon-facility.png">
            </template>
            <span>设备数量 <text class="color-orange">{{ pageInfo.content.deviceNum }}</text></span>
          </cardTitle>
          <cardTitle :cssType="1">
            <template #icon>
              <img src="../../../../assets/bi/icon-node.png">
            </template>
            <span>节点数量 <text class="color-orange">{{ pageInfo.content.pointNum }}</text></span>
          </cardTitle>
        </div>

      </a-col>
      <a-col :span="10"></a-col>
      <a-col :span="7" style="padding-right: 65px">
        <div class="title-view">
          <cardTitle :cssType="1" v-if="pageInfo.content.yearEmissionReduction">
            <span style="margin-left: 15px;font-size: 13px">{{ pageInfo.content.yearEmissionReduction }}</span>
          </cardTitle>
        </div>
      </a-col>
    </a-row>
    <!-- 第二行 -->
    <div class ="template-midden-view">
      <a-row class ="template-midden-chart-view">
        <!-- 第二行第一列 -->
        <a-col :span="7" class="template-midden-chart-col-view">
          <div class="template-midden-chart-item-wrapper"
               v-for="(item,index) in pageInfo.cardList.leftTop" :key="index">
            <ChartWrapper :title="item.cardName">
              <template #chart>
                <component :is="EnumChartType[item.chartType]"
                           :configType="0"
                           :totalType="1"
                           :public="{
                  cardKey: item.key,
                  dashboardConfigId: item.configId,
                  chartType: item.chartType,
                  teblePre: 0
                }">

                </component>
              </template>
            </ChartWrapper>
          </div>
        </a-col>
        <!-- 第二行第二列 -->
        <a-col :span="10" class="template-midden-map-view" :style="`background-image: url(${pageInfo.coreBackground.url})`">
          <mapTitle v-if="pageInfo.coreMain" :coreMain="pageInfo.coreMain"></mapTitle>
          <mapFooter :coreSubStatData="pageInfo.coreSubStatData" class="map-foot"></mapFooter>
        </a-col>
        <!-- 第二行第三列 -->
        <a-col :span="7" class="template-midden-chart-col-view">
          <div class="template-midden-chart-item-wrapper"
               v-for="(item,index) in pageInfo.cardList.rightTop" :key="index">
            <ChartWrapper :title="item.cardName">
              <template #chart>
                <component :is="EnumChartType[item.chartType]"
                           :configType="0"
                           :totalType="1"
                           :public="{
                  cardKey: item.key,
                  dashboardConfigId: item.configId,
                  chartType: item.chartType,
                  teblePre: 0
                }">

                </component>
              </template>
            </ChartWrapper>
          </div>
        </a-col>
      </a-row>
      <!-- 第三行 -->
      <a-row class ="template-midden-table-view">
        <a-col :span="17" class="template-midden-table-item-wrapper">
          <ChartWrapper :title="pageInfo.cardList.bottomList[0].cardName">
            <template #chart>
              <component :is="EnumChartType[pageInfo.cardList.bottomList[0].chartType]"
                         :configType="0"
                         :totalType="0"
                         :public="{
                cardKey: pageInfo.cardList.bottomList[0].key,
                dashboardConfigId: pageInfo.cardList.bottomList[0].configId,
                chartType: pageInfo.cardList.bottomList[0].chartType,
                tablePre: 2
              }">
              </component>
            </template>
          </ChartWrapper>
        </a-col>

        <a-col :span="7" class="template-midden-table-item-wrapper">
          <ChartWrapper :title="pageInfo.cardList.bottomList[1].cardName">
            <template #chart>
              <component :is="EnumChartType[pageInfo.cardList.bottomList[1].chartType]"
                         :configType="0"
                         :totalType="0"
                         :public="{
                cardKey: pageInfo.cardList.bottomList[1].key,
                dashboardConfigId: pageInfo.cardList.bottomList[1].configId,
                chartType: pageInfo.cardList.bottomList[1].chartType,
                tablePre: 2
              }">
              </component>
            </template>
          </ChartWrapper>
        </a-col>
      </a-row>
    </div>

  </div>
</template>

<style scoped>
.color-orange {
  font-size: 14px;
  font-weight: bold;
  color: #f3921d;
  margin: 0 5px;
}

.bi-template-view {
  width: 100%;
  height: 100%;

  .template-total-view,
  .template-midden-view,
  .template-table-view {
    padding: 0 32px;
  }

  .template-total-view {
    top: 80px;
    position: absolute;
    width: 100%;
    height: 30px;

    .title-view {
      /** display: flex是控制布局的 */
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;

      .card-title-view {
        width: 32.8%;
      }
    }
  }

  .template-midden-view {
    padding-top: 18px;
    height: 100%;

    .template-midden-chart-view {
      height: calc(100% - 220px);

      .template-midden-chart-col-view {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .template-midden-chart-item-wrapper {
          width: 100%;
          height: calc(100% / 3);
          margin-bottom: 8px;
        }
      }
    }

    .template-midden-map-view {
      background-repeat: no-repeat;
      height: 100%;
      position: relative;
      background-size: contain;
      background-position: center;

      .map-foot {
        position: absolute;
        bottom: 0;
      }
    }

    .template-midden-table-view {
      height: 235px;

      .template-midden-table-item-wrapper {
        width: 100%;
        height: 100%;

        &:nth-child(2) {
          padding-left: 16px;
          box-sizing: border-box;
        }
      }
    }
  }
}

:deep(.arco-spin-mask) {
  background: transparent;
}
</style>